<template>
  <div id="testDiv">
    <a-page-header class="title" title="九种国际色" sub-title="选择复制文字"/>
    <div @click="getColor" style="background:#4C0013" class="colorCard">#4C0013</div>
    <div @click="getColor" style="background:#003153" class="colorCard">#003153</div>
    <div @click="getColor" style="background:#800020" class="colorCard">#800020</div>
    <div @click="getColor" style="background:#0095B6" class="colorCard">#0095B6</div>
    <div @click="getColor" style="background:#8F4B28" class="colorCard">#8F4B28</div>
    <div @click="getColor" style="background:#1B5585" class="colorCard">#1B5585</div>
    <div @click="getColor" style="background:#B05923" class="colorCard">#B05923</div>
    <div @click="getColor" style="background:#81D8D0" class="colorCard">#81D8D0</div>
    <div @click="getColor" style="background:#002FA7" class="colorCard">#002FA7</div>
    <a-back-top><div>返回顶部</div></a-back-top>
  </div>
</template>

<script>
export default {
  methods:{
    getColor(e){
      //var contents=e.target.innerText;
      //复制选择的文字
      document.execCommand('copy');
    }
  }
}
</script>
<style scoped>
.title{
  border: 1px solid rgb(235, 237, 240);
  background: aqua;
}
#testDiv{
  height: 100%;
  width: 100%;
}
.colorCard{
  height: 130px;
  width: 130px;
  float:left;
  color: aliceblue;
  line-height:900%;
  padding-left:3%;
  border-radius: 20px;
}
</style>